
<template>

  <div class="hotelinfo-container">
    <Header v-show="$route.meta.show"></Header>
    <!-- 酒店信息部分 -->

    <div class="hotel-container">
      <div class="hotel-info">
        <!-- 酒店头部区域 -->
        <div class="hotel-header">
          <p class="hotel-name">
            <span>{{hotelInfo.hotel_name}}</span>
            <i>经济型</i>
          </p>
          <p class="hotel-position"> <b>[新国际博览中心/世博园 ]</b> {{hotelInfo.hotel_address}}</p>
        </div>
        <!-- 酒店信息区域 -->
        <div class="hotel-msg">
          <!-- 左侧轮播图 -->
          <div class="hotel-msg-left">
           <!-- 轮播图区域 -->

           <el-carousel :interval="5000" arrow="always" class="lunbo" >
            <el-carousel-item v-for="item in roomPic" :key="item">
              <el-image
              style="width: 100%; height: 100%"
              :src="item"
              :preview-src-list="roomPic">
            </el-image>
            </el-carousel-item>
          </el-carousel>
          </div>
          <!-- 右侧信息区域 -->
          <div class="hotel-msg-right">
            <div class="hotel-msg-right-comment">
              <div class="scoreBox clearFix">
                <div class="scoreBox-fl">
                  <span class="score"><b>4.8</b>分</span>
                  <span class="desc"><b>棒</b></span>
                </div>
                <div class="scoreBox-fr">
                  <span>查看{{hotelInfo.hotel_comment}}点评</span>
                </div>
              </div>
              <div class="icon">
                <ul>
                  <li>性价比高</li>
                  <li>位置优越</li>
                  <li>体验很棒</li>
                </ul>
              </div>
            </div>
            <div class="hotel-msg-right-server">
              <div class="decTime">装修时间:2021年</div>
              <div class="spec-box">
                <ul>
                  <li>行李寄存</li>
                  <li>24小时前台</li>
                  <li>公共区wifi</li>
                </ul>
              </div>
              <div class="map-container" >
                <MapContainer :hotelAddress="address" ></MapContainer>
                <button class="map-btn" @click="showMapDialog">查看大图</button>
                <el-dialog :visible.sync="dialogVisible" width="80%" height="80%">
                  <el-container style="height: 100%;">
                    <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
                      <el-button>点击去酒店</el-button>
                      <el-tabs v-model="activeTab" @tab-click="loadData" width="100%">
                        <el-tab-pane label="餐饮" name="restaurant">
                          <div v-if="restaurantList.length > 0">
                            <h4>餐馆列表：</h4>
                            <ul>
                              <li v-for="(restaurant, index) in restaurantList" :key="index">
                                {{ restaurant.name }}（{{ restaurant.address }}）
                              </li>
                            </ul>
                          </div>
                          <div v-else>
                            <h4>暂无数据</h4>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane label="景点" name="scenicSpot">
                          <div v-if="scenicSpotList.length > 0">
                            <h4>景点列表：</h4>
                            <ul>
                              <li v-for="(scenicSpot, index) in scenicSpotList" :key="index">
                                {{ scenicSpot.name }}（{{ scenicSpot.address }}）
                              </li>
                            </ul>
                          </div>
                          <div v-else>
                            <h4>暂无数据</h4>
                          </div>
                        </el-tab-pane>

                      </el-tabs>
                    </el-aside>
                    <el-main style="height: 100%;">
                      <div id="container">
                        <!-- 封装成单独的组件，传值时对应默认的自定义属性即可，如果向使用插件，直接新增插件 -->
                          <commonMap :keyword="address" :enableGeolocation="isenable"/>
                      </div>
                    </el-main>
                  </el-container>
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hotel-body clearFix">
        <div class="hotel-body-header">
          <ul>
            <li class="active">房型</li>
            <li>酒店信息</li>
            <li>交通</li>
          </ul>
        </div>
        <div class="search" >
          <div class="search-box">
            <el-date-picker
                v-model="searchValue"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
            <el-button type="primary" style="margin-left: 10px;" @click="searchRooms">搜索</el-button>
          </div>
        </div>
        <!-- 条件 -->
        <div class="filter">
          <div class="cfilter">
            <ul>
              <li><span>房型</span></li>
              <li>|</li>
              <li><span>特色房型</span></li>
              <li>|</li>
              <li><span>价格范围</span></li>
              <li>|</li>
              <li><span>支付方式</span></li>
            </ul>
          </div>
        </div>
        <!-- 房间预订 -->
        <div class="roomList" v-loading="loading">
          <div class="room-option clearFix">
            <span class="room fl_left">房型</span>
            <span class="bed fl_left">房间配备设施</span>
            <span class="breadfast fl_left">早餐</span>
            <span class="man fl_left">入住人数</span>
            <span class="gov fl_left">政策</span>
            <span class="price fl_left">房价</span>
          </div>

          <ul>
            <!-- 没有房间时显示的 -->
            <div class="no-item" v-show="roomInfo.length === 0">
              <img src="https://s.qunarzz.com/hotel_fekit/image/d-quote-fail.png" alt="">
              <span>该日期暂无报价，请选其他日期或电话咨询酒店</span>
            </div>
            <li v-for="item2 in roomInfo" :key="item2.id">

          <!-- 有房间正常显示房间信息 -->
              <div class="roomCard" >
                <div class="roomCard-left-main">
                  <div class="img-box">
                    <img :src="roomPic[0]" alt="">
                  </div>
                  <div class="room-name">
                    <div class="words">{{item2.title}}</div>
                    <div class="roominfolist">{{item2.room_type}}</div>
                  </div>
                </div>
                <div class="saleRoomList clearFix">
                  <div class="saleRoomList-item">
                    <div class="bed-area">
                      <div class="bed-name">{{item2.room_equ}}</div>
                      <div class="bread-fast">{{item2.room_eat}}</div>
                      <div class="man">{{item2.room_number}}人</div>
                      <div class="gov">
                        <span class="color-item"> {{time}}日18:00前免费取消</span>
                        <span class="color-item"> <a href="#">立即确认</a> </span>
                        <span>可住时段: 10:00-18:00</span>
                      </div>
                      <div class="price">
                        <span>￥{{item2.room_price}}</span>
                        <button class="btn-item" @click="gotoOrderInfo(item2)">立即预定</button>
                      </div>
                    </div>

                  </div>

                </div>
              </div>
            </li>
          </ul>

        </div>
      </div>
    </div>

 <Footer v-show="$route.meta.show"></Footer>
  </div>

</template>

<script>
import commonMap from '@/components/Map/commonMap.vue'
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
import MapContainer from '@/views/hotel-book/hotel-info/map-container/map'
import { getHotelInfo } from '@/api/hotel'
import { getToday, formatDate } from '@/utils/getToday'
import { mapMutations } from 'vuex'
export default {
  components: {
    Header,
    Footer,
    MapContainer,
    commonMap
  },
  data () {
    return {
      hotelInfo: {}, // 当前酒店信息
      roomInfo: [], // 房间信息
      time: getToday(),
      roomPic: [], // 房间图片,
      address: '', // 目标地址，供高德地图使用
      dialogVisible: false, // 大地图是否可见,
      searchValue: '', // 搜索日期
      loading: false,
      map: null,
      route: false, // 是否进行路线规划
      activeTab: 'restaurant',
      restaurantList: [], // 美食
      scenicSpotList: [], // 景点
      isenable: true // 是否开启定位
    }
  },
  mounted () {
    this.initHotelInfo()
    this.loadData()
  },

  methods: {
    ...mapMutations('hotel', ['setHotel']),
    // 搜索酒店房间
    async  searchRooms () {
      this.searchValue = formatDate(this.searchValue)
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 2000)
    },
    // 加载酒店信息
    async initHotelInfo () {
      try {
        const hotelId = this.$route.query.id
        const { data: res } = await getHotelInfo(hotelId)
        this.hotelInfo = res.data[0]
        // console.log(this.hotelInfo)
        // 将酒店信息单独存到hotel模块的vuex中存储
        this.setHotel(res.data[0])
        this.address = res.data[0].hotel_address
        // console.log(this.address)
        // console.log(this.hotelInfo)
        this.roomInfo = this.hotelInfo.hotel_rooms

        console.log(this.roomInfo)
        if (this.roomInfo.length !== 0) {
          const imageUrl = this.roomInfo[0].room_pic
          const imageUrlString = imageUrl.split(',')
          this.roomPic = imageUrlString
        }
      } catch (error) {
        console.log(error)
      }
      // console.log(this.roomPic)
    },
    // 跳转到酒店订单详情页
    gotoOrderInfo (item2) {
      this.$router.push({
        name: 'OrderInfo',
        query: item2
      })
    },
    // 查看大地图 并路径规划
    showMapDialog () {
      this.dialogVisible = true
    },
    loadData () {
      if (this.activeTab === 'restaurant') {
        // 加载餐馆数据
        // 可以在这里调用接口获取数据，以下为示例数据
        this.restaurantList = [
          { name: '餐馆1', address: '地址1' },
          { name: '餐馆2', address: '地址2' }
        ]
      } else if (this.activeTab === 'scenicSpot') {
        // 加载景点数据
        // 可以在这里调用接口获取数据，以下为示例数据
        this.scenicSpotList = [
          { name: '景点1', address: '地址1' },
          { name: '景点2', address: '地址2' }
        ]
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>
<style lang="less" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;

}
/deep/.el-tabs__nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

/deep/.el-tabs__active-bar {
  display: none;
}

html {
  box-sizing: border-box;

}
body {
  background-color: #f7f7f7;
}
.hotel-container {
  width: 1200px;
  background-color: #f7f7f7;
  margin: 0 auto;
  // height: 1000px;
  overflow: hidden;

  // 酒店信息区域
  .hotel-info {
    height: 375px;
    overflow: hidden;

    .hotel-header {
      height: 70px;
      position: relative;

      .hotel-name {
        height: 40px;

        span {
          line-height: 40px;
          font-weight: 600;
          font-size: 20px;
        }

        i {
          display: inline-block;
          height: 20px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: 50%;
          vertical-align: middle;
          margin-left: 10px;
        }
      }

      .hotel-position {
        position: absolute;
        font-size: 12px;
        line-height: 20px;
        color: #555;
        top: 35px;
        bottom: 10px;

        b {
          color: #37e;
        }
      }
    }

    .hotel-msg {
      width: 100%;
      display: flex;
      height: 375px;
      border-radius: 10px;
      .hotel-msg-left {
        width: 700px;
        height: 300px;
        background-color: blue;

       .lunbo {
        width: 600px;
       }

        .hotel-msg-right {
          flex: 1;
          background-color: green;
        }
      }

      .hotel-msg-right {
        width: 100%;

        .hotel-msg-right-comment {
          width: 100%;
           background-color: #fff;

          .scoreBox {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .scoreBox-fl {
              // float: left;
              padding: 10px 10px;

              .score b {
                font-size: 30px;
                font-weight: bold;
                color: #00afc7;
                margin-right: 7px;
              }

              .desc b {
                background: #03bed8;
                border-radius: 8px 8px 8px 2px;
                color: #fff;
                padding: 0 10px;
                font-size: 16px;
              }
            }

            .scoreBox-fr {
              // float: right;
              padding-right: 10px;
            }

            .scoreBox-fr::after {
              content: '>';
              width: 7px;
              height: 7px;

            }
          }

          .icon {
            background-color: #fff;

            ul {
              display: flex;
              padding: 5px 5px;
              height: 28px;

              li {

                margin-left: 10px;
                line-height: 28px;
                background: rgba(10, 196, 221, 0.1);
                border-radius: 4px;
                color: #2fa2b2;
                font-size: 13px;
              }
            }
          }
        }

        .hotel-msg-right-server {
          width: 100%;
          height: 203px;

          .decTime {
            height: 20px;

            line-height: 20px;
            font-size: 14px;
            color: #212121;
            padding-left: 10px;
          }

          .spec-box {
            width: 350px;
            margin-bottom: 26px;
            overflow: hidden;

            margin-top: 10px;

            ul {
              display: flex;
              align-items: center;

              li {
                margin-left: 10px;
                color: #9e9e9e;
              }
            }
          }

          .map-container {
            position: relative;
            width: 95%;
            height: 133px;
            background-color: #37e;
            margin: 0 auto;
            .map-btn {
              position: absolute;
              height: 20px;
              line-height: 20px;
              background-color: red;
              top: 0px;
              padding: 0 3px ;
              background-color: #0ac4dd;
              font-size: 12px;
              color: #fff;
              letter-spacing: 0;
              cursor: pointer;
              z-index: 1;
              opacity: 0.5;
              border: none;
            }
            .bigMap {
              width: 800px;
              height: 500px;
            }
          }
        }
      }
    }

  }

  // 酒店主要预约区域
  .hotel-body {
    border-radius: 5px;
    .hotel-body-header {
      border-bottom: 1px solid #ddd;
      height: 40px;
      padding: 0 20px;

      ul {
        display: block;

        li {
          float: left;
          text-align: center;
          width: 80px;
          height: 40px;
          line-height: 40px;
          margin-right: 20px;
          color: #fff;
          font-size: 18px;

        }

        .active {
          background: #49f;
        }

        li:hover {
          border-bottom: 1px solid #49f;
        }

      }

    }

    .search {
      width: 100%;
      background: #fff;
      padding: 8px 20px 8px;

      .search-box {
        height: 40px;
        line-height: 40px;
      }
    }

    // 条件
    .filter {
      background: #fff;
      padding-left: 20px;

      .cfilter {
        padding: 16px 0;

        ul {
          display: flex;

          li {
            margin-right: 20px;
            font-size: 20px;
          }

        }
      }
    }

    // 房间预订
    .roomList {
      width: 100%;
      // height: 500px;
      background-color: #fff;

      .fl_left {
        float: left;
      }

      .room-option {
        width: 1160px;
        height: 34px;
        line-height: 34px;
        color: #9e9e9e;
        font-size: 12px;
        background: #f7f7f7;
        margin: 0 auto;

        .room {
          width: 310px;
          margin-left: 10px;
        }

        .bed {
          width: 120px;
          margin-left: 30px;
        }

        .breadfast {
          width: 60px;
          margin-left: 105px;
        }

        .man {
          width: 60px;
          margin-left: 48px;
        }

        .gov {
          width: 60px;
          margin-left: 53px;
        }

       .price {
          width: 120px;
          margin-left: 34px;
          text-align: right;

          .Right-book {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }
      }
      .no-item {
        margin: 50px 0;
        display: flex;
        height: 200px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span {
          margin-top: 30px;
        }
      }
      .roomCard {
        display: flex;
        width: 100%;
        height: 150px;
        padding-bottom: 24px;
        // background-color: red;
        justify-content: space-between;
        margin-bottom: 30px;
        .roomCard-left-main {
          width: 310px;
          padding-bottom: 15px;
          display: flex;
          padding: 30px 15px;
          height: 150px;

          .img-box img {
            width: 140px;
            height: 100px;
            border-radius: 4px;
          }

          .room-name {
            margin-left: 10px;

            .words {
              font-size: 15px;
              line-height: 22px;
              color: #212121;
              margin-bottom: 6px;
            }

            .roominfolist {
              width: 150px;
              max-height: 34px;
              margin-bottom: 6px;
              font-size: 12px;
              color: #9e9e9e;
              overflow: hidden;
              line-height: 18px;

            }

          }
        }

        .saleRoomList {
          width: 835px;
          height: 150px;
          padding-top: 30px;

          .saleRoomList-item {
            width: 812px;
            height: 113px;

            .bed-area {
              width: 812px;
              height: 500px;
              display: flex;

              .bed-name {
                display: inline-block;
                height: 100px;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #212121;
                line-height: 20px;
                margin: 0 0 2px 2px;
                width: 180px;
              }

              .bread-fast {

                width: 108px;
                display: inline-block;
                color: #08b2cc;
                font-size: 14px;
                line-height: 100px;
                height: 100px;

                margin-left: 48px;
              }

              .man {
                display: inline-block;
                width: 113px;
                font-size: 12px;
                line-height: 100px;
                height: 100px;
              }

              .gov {
                display: inline-block;
                width: 100px;
                font-size: 14px;
                // line-height: 100px;
                display: flex;
                flex-direction: column;

                span.color-item {
                  margin-bottom: 3px;
                  color: rgb(0, 156, 103);
                }

                span.color-item a {
                  color: rgb(0, 156, 103);
                }

              }

              .price {
                display: inline-block;
                margin-left: 87px;
                line-height: 100px;
                display: flex;

                .btn-item {

                  margin-left: 30px;
                  line-height: 20px;
                  margin-top: 30px;

                  width: 110px;
                  height: 36px;
                  line-height: 36px;
                  text-align: center;
                  color: #fff;
                  font-size: 14px;
                  border-radius: 18px;
                  background: #ff714a;
                  cursor: pointer;
                }
              }

            }

          }

        }
      }
    }
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
}</style>
